<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="../templates/principal.xhtml">

    <ui:define name="content" id="content">
        <h1 class="title ui-widget-header ui-corner-all">Bem Vindo ao Cadastro de Moedas</h1>

        <h:form id="form" prependId="false">
            

            <p:dataTable id="tabMoeda" widgetVar="wtabMoeda" var="moeda" value="#{moedaBean.lazyModel}"
                         paginator="true" rows="10" lazy="true" 
                         rowStyleClass="#{empty rowIndex or rowIndex mod 2 ne 0 ? 'even-row' : ''}" rowIndexVar="rowIndex"
                         selection="#{moedaBean.selectedMoeda}" selectionMode="single" 
                         onRowSelectComplete="moedaDialog.show()" onRowSelectUpdate="display">
                
                <f:facet name="header">
                    Selecione uma linha e clique para Manutenção
                </f:facet>

                <p:column headerText="Descrição" sortBy="#{moeda.nomMoeda}" filterBy="#{moeda.nomMoeda}">
                    <h:outputText value="#{moeda.nomMoeda}" />
                </p:column>

                <p:column headerText="Sigla" sortBy="#{moeda.sigla}" filterBy="#{moeda.sigla}">
                    <h:outputText value="#{moeda.sigla}" />
                </p:column>

                <p:column headerText="Cotação" sortBy="#{moeda.cotacao}" filterBy="#{moeda.cotacao}" style="text-align: right;">
                    <h:outputText value="#{moeda.cotacao}" >
                        <f:convertNumber locale="pt_BR" pattern="#,##0.00" minFractionDigits="2" />
                    </h:outputText>
                </p:column>

                <p:column id="date" headerText="Data Cotação" filterBy="#{moeda.dataCotacao}" sortBy="#{moeda.dataCotacao}" style="text-align: center;">
                    <h:outputText value="#{moeda.dataCotacao}">
                        <f:convertDateTime type="date" dateStyle="short" pattern="dd/MM/yyyy"/>
                    </h:outputText>
                </p:column>

            </p:dataTable>

            <p:dialog id="dialog" header="Detalhes Moeda" widgetVar="moedaDialog" resizable="true"
                      width="700" showEffect="explode" hideEffect="explode">

                <h:panelGrid id="display" columns="2" style="margin-bottom:50px" cellpadding="5">
                    <h:outputText value="Descrição:" />
                    <p:inputText id="innomMoeda" value="#{moedaBean.selectedMoeda.nomMoeda}" required="true" style="width:500px; font-weight:bold" />

                    <h:outputText value="Sigla:" />
                    <p:inputText id="inSigla" value="#{moedaBean.selectedMoeda.sigla}" required="true" style="width:100px; font-weight:bold" />

                    <h:outputText value="Cotação:" />
                    <p:inputText id="inVlrCotacao" value="#{moedaBean.selectedMoeda.cotacao}" style="width:200px; font-weight:bold; text-align: right;"
                                 onkeyup="javascript:maskIt(this,event,'###.###.###,##',true)">
                        <f:convertNumber locale="pt_BR" pattern="###,###,##0.00" minFractionDigits="2" />
                    </p:inputText>

                    <h:outputText value="Data Cotação:" />
                    <p:calendar id="inDatCotacao" locale="pt" value="#{moedaBean.selectedMoeda.dataCotacao}" pattern="dd/MM/yyyy" />
                </h:panelGrid>
                <br />
                <p:commandButton value="Inserir" update="messages,tabMoeda,display"
                                 actionListener="#{moedaBean.inserir}" oncomplete="moedaDialog.hide()" />
                <p:commandButton value="Alterar" update="messages,tabMoeda,display"
                                 actionListener="#{moedaBean.alterar}" oncomplete="moedaDialog.hide()" />
                <p:commandButton value="Excluir" onclick="confirmation.show()" type="button" />
            </p:dialog>

            <p:confirmDialog message="Confirma a Exclusão dessa Moeda?" header="Exclusão do Moeda" severity="alert" widgetVar="confirmation">

                <p:commandButton value="Sim" update="messages,tabMoeda,display" oncomplete="confirmation.hide(),moedaDialog.hide()"
                                 actionListener="#{moedaBean.excluir}" />
                <p:commandButton value="Não" onclick="confirmation.hide()" type="button" />

            </p:confirmDialog>
            
        </h:form>
    </ui:define>
</ui:composition>